<template>
    <view class="globe_back">
        <view class="box">
            <view>
                <view class="noticeTime">2022-05-20</view>
                <!-- 系统通知 -->
                <view class="list">
                    <view class="line_F7FAFF title">恭喜你成功注册同路仁账户！</view>
                    <view class="flex justify_content_between">
                        <view class="name">系统通知</view>
                        <view class="time">2022-02-12 14:03</view>
                    </view>
                </view>
                <!-- 订单通知 -->
                <view class="list">
                    <view class="line_F7FAFF title">您购买的商城订单已发货，点击查看详情。</view>
                    <view class="flex justify_content_between">
                        <view class="name">订单通知</view>
                        <view class="flex">
                            <view class="time">2分钟前</view>
                            <u-icon name="arrow-right" size="14" color="#999"></u-icon>
                        </view>
                    </view>
                </view>
                <!-- 拒绝订单 -->
                <view class="list">
                    <view class="line_F7FAFF title">您有一笔退款订单已被商家拒绝。</view>
                    <view class="flex reply">
                        <view class="cl_3377FF">拒绝原因：</view>
                        <view>商品已发货，请耐心等待。</view>
                    </view>
                    <view class="flex justify_content_between">
                        <view class="name">订单通知</view>
                        <view class="flex">
                            <view class="time">刚刚</view>
                            <u-icon name="arrow-right" size="14" color="#999"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {}
};
</script>

<style scoped lang="scss">
.box {
    padding: 5rpx 32rpx 32rpx;
    .noticeTime {
        text-align: center;
        color: #999ca3;
        font-size: 24rpx;
        margin: 40rpx auto;
    }
    .list {
        padding: 8rpx 24rpx;
        background: white;
        border-radius: 24rpx;
        margin-bottom: 24rpx;
    }
    .title {
        color: #00091a;
        font-size: 32rpx;
        padding: 24rpx 0;
    }
    .name {
        font-size: 28rpx;
        color: #999ca3;
        padding: 24rpx 0;
    }
    .time {
        color: #ccced1;
        font-size: 24rpx;
        padding: 24rpx 0;
    }
    .reply {
        font-size: 28rpx;
        background: #f7f7f7;
        padding: 24rpx;
        border-radius: 16rpx;
    }
}
</style>
